<template>
	<view class="all">
		<!-- 画面start~ -->
		<image style="width: 100%;height: 238rpx;" src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/25/1711358394748fcc6edf7add94ef896f388e11dcfd3d6.png"></image>
		<view class=""
			style="margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="red-tip">
						系统将对不同场景的素材，按照爆款逻辑自动搭配文案和音乐，并批量合成爆款视频
					</view>
					<view class="sing-box">
						<view class="left">拍摄脚本</view>
						<view class="right" @click="navJiaobenku">
							<text>{{jiaoben.length != 0?'已选择':'未选择'}}</text>
							<text class="jiantou">></text>
						</view>
					</view>
					<view class="sucai">
						<view class="header">
							图片素材：随机上传不分顺序
						</view>
						<view class="beizhu">
							备注：上传<text style="color: red;">3</text>张图片，最多上传<text style="color: red;">100</text>张图片
						</view>
						<view class="shuoming">
							说明：若本视频工程创建后用于矩阵发布，请上传尽可能多的镜头素材(视频)，避免大量发布时被判重</text>
						</view>
						<view style="display: flex;flex-wrap: wrap;">
					
							<view style="display: flex;">
								<block v-for="(item,index) in form.videoList" :key="index">
									<view style="position: relative;margin-right: 20rpx;">
										<image :src="item.mediaURL" style="height: 150rpx;width: 150rpx;"></image>
										<view class="close" @click="deleteImg(index)">
											x
										</view>
									</view>
								</block>
							</view>
							<view class="video-upload" style="background-color: aliceblue;">
								<image src="../../static/images/xiangji.png" style="height: 70rpx;width: 70rpx;" @click="sendVideo()"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="display: block; width: 100%;height: 37rpx; margin-top: -40rpx; margin-bottom: 20rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 画面end~ -->
		
		<!-- 文案start~ -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/17109998445840bff3b4c34dd4f2680f514de78fb93fa.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="red-tip">
						注意：模剪文案默认智能随机匹配，用户也可以通过“文案自选或自定义”，选择自己满意的文案。
					</view>
					<view class="wenan">
						<view class="header">
							<view class="header-item" :class="{'wenan-type-active':wenanNav==1}"
								style="font-weight: bold;height: 80rpx;line-height: 80rpx; font-size: 40rpx;">
								顶部文案部分
							</view>
						</view>
						<view class="content">
							<view class="item" @click="navGuanjianci">
								<view class="left">文案关键词</view>
								<view class="right">
									<text style="color:#666">{{form.content == ''?'去设置':'已完成设置'}}</text>
									<text class="jiantou" style="color: #666;">></text>
								</view>
							</view>
							<view class="item" :data-title="shopTrade" @click="navDingbuwenan">
								<view class="left">
									文案自选或自定义
								</view>
								<view class="right">
									<text>{{isChoosed?'已选择':'随机匹配'}}</text>
									<text>></text>
								</view>
							</view>
							<view class="item" @click="openVideoFontColor">
								<view class="left">
									视频字体颜色
								</view>
								<view class="right">
									<text>智能匹配</text>
									<text>></text>
								</view>
							</view>
							<view class="ziti">
								<text style="font-weight: bold;font-size: 32rpx;">字体大小设置{{form.fontSize}}</text>
								<view class="yulan">
									<text :style="{'font-size':form.fontSize+'px'}">预览字体</text>
								</view>
								<view class="slider-box" style="background-color: #dbdbdb;">
									<slider active-color="#d4237a" min="10" max="50" :value="form.fontSize"
										block-size="12" @changing="fontSizeChange"></slider>
									<view class="slider-footer">
										<view class="xiao">
											小
										</view>
										<view class="huifu" @click="huifuFontSize">
											恢复默认
										</view>
										<view class="da">
											大
										</view>
									</view>
								</view>
							</view>
							<view class=""
								style="margin-top: 50rpx; width: 100%; display: flex; justify-content: center; font-size: 40rpx; font-weight: bold;">
								口播字幕部分
							</view>
							<view class="item">
								<view class="left">
									口播设置
								</view>
								<view class="right">
									<switch style="transform:scale(0.7)" @change="onkoubu"></switch>
								</view>
							</view>
							<view class="item" v-if="koubo" @click="navPeiyinyuan">
								<view class="left">
									配音员
								</view>
								<view class="right">
									<text>{{peiyinyuanForm.username?peiyinyuanForm.username:'选择配音员>'}}</text>
								</view>
							</view> 
							<view class="item" v-if="koubo" @click="navKouboText">
								<view class="left">
									口播文案
								</view>
								<view class="right">
									<text>{{form.textContent?'已自定义>':'默认顶部文案>'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 文案end~ -->
		
		
		<!-- 音乐设置start -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1710999876503239032008ae44d21be7ed64e2758cb1a.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="wenan">
						<view class="content">
							<view class="item" @click="navMusicSucai">
								<view class="left">
									音乐素材设置
								</view>
								<view class="right">
									<text>{{isChooseMusic ? '已选择':'智能匹配' }}</text>
									<text>></text>
								</view>
							</view>
							<view class="item" @click="localhostMusic"  v-if="false">
								<view class="left">
									音乐个性化
								</view>
								<view class="right">
									<text>去设置</text>
									<text>></text>
								</view>
							</view>
		
							<view class="ziti">
								<text style="font-weight: bold;font-size: 32rpx;">音量设置{{form.yinLiang}}</text>
		
								<view class="slider-box">
									<slider active-color="#d4237a" min="0" max="100" :value="form.yinLiang"
										block-size="16" @changing="yinliangChange"></slider>
									<view class="slider-footer">
										<view class="xiao">
											小
										</view>
										<view class="huifu" @click="huifuYinliang">
											恢复默认
										</view>
										<view class="da">
											大
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 音乐设置end -->
		
		<!-- 其他设置 -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/17109997760963c6b878d159448f6a3fb01d21c470ce6.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="wenan">
						<view class="content">
							<view class="item">
								<view class="left">
									剪辑库名称
								</view>
								<view class="right">
									<text>{{shopType+'+'+form.videoDay}}</text>
								</view>
							</view>
							<view class="item">
								<view class="left">
									商家所属行业
								</view>
								<view class="right">
									<text>{{shopTrade}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 其他设置end -->
		
		<view class="" style="height: 50rpx; width: 100vw;">
		
		</view>
		
		
		<!-- 字体颜色模态框 start -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>请设置视频字体颜色</view>
					<view style="font-weight: normal;font-size: 48rpx;color: #666" @click="closeVideoFontColor">x</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="content">
						<view class="item" v-for="(item,index) in fcList" :key="index" @click="changeFont(item,index)"
							:style="{fontFamily:item.family,color:item.color,'-webkit-text-stroke':'2rpx '+item.miaobian}"
							style="position: relative;">
							我的字体
							<image v-if="changeFontIndex == index"
								style="position: absolute; height: 30rpx;width: 30rpx;right: 0; bottom: 0;"
								src="../../static/images/youxiajiaoxuanzhong.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<view
					style="margin: 0 auto; width: 100vw; height: 70rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0rpx;">
					<view @click="enterFont"
						style="border-radius: 30rpx; height: 100%; color: white; line-height: 70rpx; background-color: rgb(14, 16, 101); width: 100vw; text-align: center;">
						确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 字体颜色模态框 start -->
		
		<!-- 口播start -->
		<uni-popup ref="koubo" background-color="rgba(0,0,0,0)" type="bottom">
			<view style="background-color: #fff;">
				<view style="display: flex; flex-direction: column; justify-content: center;">
					<view style="font-size: 40rpx; font-weight: bold; height: 100rpx; align-items: center; width: 100%; display: flex; justify-content: center;">请设置视频口播文案</view>
					<radio-group @change="handleText" style="display: flex; justify-content: space-around; align-items: center; height: 100rpx; margin-bottom: 50rpx;">
						<label class="radio">
							<radio value="mo" :checked="form.selectText === 'mo'" />默认顶部文案
						</label>
						<label class="radio">
							<radio value="kou" :checked="form.selectText === 'kou'" />自定义文案
						</label>
					</radio-group>
				</view>
				<view class="" style="height: 300rpx; padding: 0 50rpx;" v-if="form.selectText === 'kou'">
					<editor placeholder='一行显示12个字,请以逗号","分隔每一句话' @input="onText"></editor>
				</view>
				<view
					style="margin: 0 auto ; width: 100vw; height: 70rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0rpx;">
					<view @click="enterText"
						style="border-radius: 30rpx; height: 100%; color: white; line-height: 70rpx; background-color: rgb(14, 16, 101); width: 100vw; text-align: center;">
						确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 口播end -->
		
		<view style="height: 60rpx;width: 100%;"></view>
		
		
		<!-- 确认按钮 -->
		<view class="BtnList">
			<!-- <view class="btn" @click="yulan" style="background-color: darkgrey;color: white;">预览视频</view> -->
			<view class="btn" @click="enter" style="background-color: rgb(14, 16, 101); color: white;">确认</view>
		</view>
		
		
		
		
		
		
	</view>
</template>

<script>
	import Http from "@/utils/http"
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				isSetMubanGuanjianzi: false,
				shopTrade:'',
				shopType:'企业做促销',
				// fontSize: 24,
				jiaoben:[],
				shopId:'',
				fcList: [],
				changeFontIndex: 0,
				koubo: false,
				peiyinyuanForm: {},
				isChooseMusic:false,
				form:{
					videoInfo:"",
					gif:true,
					selectText:'mo',
					textContent:'',
					yuanyin:0,
					miaobian: '#000000',
					fontSize: 24,
					font: 'FZHei-B01S',
					fontColor: '#f5d816',
					width: '',
					height: '',
					peiyinyuan: "",
					videoInfo: "",
					videoCategory: '企业做促销',
					videoTime: '',
					videoDay: '',
					isQuchong: true,
					isZhuangchang: false,
					jiaobenId:'',
					fontSize:24,
					yinLiang: 10,
					jiaobenId:null,
					type:'',
					videoList:[],
					audioList: [],
					content: "",
				}
			}
		},
		mounted() {
			this.shopId = app.globalData.shopId;
			uni.$on('jiaoben', (data) => {
				this.jiaoben = data.changeList
				this.form.jiaobenId = data.id
			});
		},
		onShow() {
			if (app.globalData.shopId) {
				http.get('v1/system/createShop/' + app.globalData.shopId).then(res => {
					this.shopTrade = res.data.data.trade;
				})
			}
			http.get("v1/mubanGuanjiazi/isSetMubanGuanjianzi").then(res => {
				this.isSetMubanGuanjianzi = res.data.data
			})
		},
		onLoad(option) {
			this.form.type = option.id;
			this.form.type = option.id
			this.initWenanColor()
			http.get(`v1/gif/getJiaobenRandOne?cateage=${this.form.type}`).then(res => {
				if (res.data.code == 200 && res.data.data != undefined) {
					this.jiaoben = JSON.parse(res.data.data.message);
				}
			})
			if (app.globalData.shopId) {
				http.get('v1/system/createShop/' + app.globalData.shopId).then(res => {
					this.shopTrade = res.data.data.trade;
				})
			}
			// 创建一个 Date 对象
			var today = new Date();
			
			// 获取月份（注意：getMonth 方法返回的月份是从 0 开始计数的，需要加1）
			var month = today.getMonth() + 1;
			
			// 获取日期
			var day = today.getDate();
			
			// 输出月份和日期
			this.form.videoDay = month + "月" + day + "日";
			
			let obj = {
				category: this.form.type,
				tradeId: app.globalData.tradeId,
			}
			http.post('v1/mubanGuanjiazi/start', obj).then(res => {
				if (res.data.code == 200) {
					let dataList = res.data.data;
					let randomIndex = Math.floor(Math.random() * dataList.length);
					console.log(randomIndex);
					this.form.content = dataList[randomIndex].textContent;
					console.log(this.form.content);
					let id = dataList[randomIndex].id;
					
					http.get('v1/music/categoryById/' + dataList[randomIndex].classes).then(res => {
						if (res.data.code == 200) {
							let obj = {
								"id": res.data.data.musicPath.id,
								"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + res
									.data.data.musicPath
							}
							this.form.audioList.push(obj)
						}
					})
				}
			})
			http.get(`v1/jiaoben/getRandOne?cateage=${this.form.type}`).then(res => {
				if (res.data.code == 200 && res.data.data != undefined) {
					this.jiaoben = JSON.parse(res.data.data.message);
				}
			})
		},
		methods: {
			
			initWenanColor(){
				var family = ['FZHei-B01S', 'KaiTi', 'SiYuan SimSun']
				var colorList = [{
					color: "#f5d816",
					miaobian: "#000000"
				}, {
					color: "#ffffff",
					miaobian: "#000000"
				}, {
					color: "#fa689f",
					miaobian: "#ffffff"
				}, {
					color: "#ffffff",
					miaobian: "#ea4857"
				}, {
					color: "#d5d3a5",
					miaobian: "#493f33"
				}, {
					color: "#a9543e",
					miaobian: "#ffffff"
				}];
				var fontList = []
				for (let i = 0; i < family.length; i++) {
					for (let j = 0; j < colorList.length; j++) {
						let item = {
							family: family[i],
							color: colorList[j].color,
							miaobian: colorList[j].miaobian,
						}
						fontList.push(item)
					}
				}
				this.fcList = fontList
			},
			navMusicSucai() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/musicSucai"
				})
			},
			handleText(value){
				this.form.selectText = value.detail.value;
				if(this.form.selectText == 'mo'){
					this.form.textContent = '';
				}
			},
			navPeiyinyuan() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/peiyinyuan"
				})
			},
			enterText(){
				if(this.form.textContent){
					this.$refs.koubo.close();
				}else{
					uni.showToast({
						title: '检查到你并没有输入哦,已为您切换为默认文案',
						icon: 'none'
					})
					this.form.selectText = 'mo';
					this.$refs.koubo.close();
				}
			},
			stripHtmlTags(html) {
			  // 使用正则表达式匹配所有 HTML 标签，并替换为空字符串
			  return html.replace(/<[^>]+>/g, '');
			},
			onText(event){
				//获取富文本输入框
				this.form.textContent = this.stripHtmlTags(event.target.html);
			},
			navKouboText(){
				this.$refs.koubo.open();
			},
			onkoubu(e) {
				this.koubo = e.detail.value;
			},
			enterFont() {
				if (this.form.fontColor) {
					this.$refs.popup.close()
				} else {
					uni.showToast({
						title: '请选择字体',
						icon: 'warning'
					})
				}
			},
			changeFont(item, index) {
				this.changeFontIndex = index;
				this.form.fontColor = item.color;
				this.form.font = item.family;
				this.form.miaobian = item.miaobian;
			},
			openVideoFontColor() {
				// http.get("v1/alifontcolor/list").then(res => {
				// 	this.alifontcolorList = res.data.data
				// })
				this.$refs.popup.open()
			},
			enter() {
				if (!this.isSetMubanGuanjianzi) {
					return uni.showToast({
						title: "请先设置文案关键字",
						icon: "none"
					})
				}
				if(this.form.videoList.length < 3){
					uni.showToast({
						title:'请至少上传三张照片',
						icon:'none'
					})
					return false;
				}
				this.form.videoInfo = JSON.stringify(this.form);
				let that = this;
				uni.showModal({
					cancelText: "取消",
					confirmText: "确认",
					title: "是否提交生成视频,需要扣除" + 1 + "积分",
					success:(modelRes) =>{
						if(this.form.textContent == ''){
							this.form.selectText = 'mo';
						}
						if (modelRes.confirm) {
							uni.showLoading({
								title: "生成中..."
							})
							// debounce(()=> {
							http.post('v1/jiaoben/test2', that.form).then(res => {
								uni.hideLoading()
								if (res.data.code == 200) {
									uni.showToast({
										title: '请稍等',
										icon: 'warning'
									});
									let obj = {
										jobId: res.data.data.job.body.jobId,
										shopId: that.shopId,
										videoInfo: that.form.videoInfo,
										videoCategory: that.form.videoCategory,
										videoDay: that.form.videoDay,
										videoList: JSON.stringify(res.data.data.videoList)
									};
									http.post('v1/jiaoben/Job', obj).then(res => {
										uni.redirectTo({
											url: '/subpkg/mkvideo/myJianjiKu?id=' + res
												.data.data
										});
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
						}
					}
				})
			},
			
			
			
			//删除图片
			deleteImg(index){
				this.form.videoList.splice(index,1);
			},
			//上传图片
			sendVideo(){
				wx.chooseImage({
				  count: 3,
				  sizeType: ['original', 'compressed'],
				  sourceType: ['album', 'camera'],
				  success: (res)=> {
				    const tempFilePaths = res.tempFilePaths
					console.log(tempFilePaths);
					let resOne = null;
					tempFilePaths.forEach(item=>{
						uni.getImageInfo({
							src:item,
							success: (res) => {
								resOne = res;
							}
						})
						http.temUpload(item).then(res => {
							let a = JSON.parse(res.data) 
							let obj = {
								height:resOne.height,
								width:resOne.width,
								mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +a.result.name
							}
							this.form.videoList.push(obj);
						})
					})
				  }
				})
			},
			fontSizeChange(e) {
				this.form.fontSize = e.detail.value
			},
			closeVideoFontColor() {
				this.$refs.popup.close()
			},
			huifuFontSize(e) {
				this.form.fontSize = 24
			},
			yinliangChange(e) {
				this.form.yinLiang = e.detail.value
			},
			huifuYinliang(e) {
				this.form.yinLiang = 10
			},
			//导航脚本库
			navJiaobenku() {
				let obj = {
					cateage: this.form.type,
					footageType: '2',
					shopTrade: this.shopTrade
				};
				uni.navigateTo({
					url: "/subpkg/mkvideo/jiaobenjiaoxue?obj=" + JSON.stringify(obj)
				});
			},
			//导航到关键词
			navGuanjianci(){
				uni.navigateTo({
					url: "/subpkg/mkvideo/gifDingbuwenan?type=" + this.form.type
				})
			},
			getMusic(classes) {
				http.get('v1/music/categoryById/' + classes).then(res => {
					this.form.audioList = [{
						"id": res.data.data.id,
						"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + res.data.data.musicPath
					}]
				})
			},
			navDingbuwenan(e) {
				if (!this.isSetMubanGuanjianzi) {
					return uni.showToast({
						title: "请先设置文案关键字",
						icon: "none"
					})
				}
				let title = e.currentTarget.dataset.title
				// this.form.type
				uni.navigateTo({
					url: `/subpkg/mkvideo/dingbuwenan?title=${title}&cateage=${this.form.type}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	image {
		display: block;
	}
	// page {
	// 	background: #f1f1f1;
	// }
	.all{
		min-height: 100vh;
		height: 100%;
		background-size: contain;
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1711006123961ed7aa87f84224969b18a90325edf048b.png');
		background-repeat: no-repeat;
	}

	.red-tip {
		font-size: 28rpx;
		color: red;
		margin: 0 30rpx 30rpx 30rpx;
	}

	.sing-box {
		margin: 30rpx;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;

		.left {
			font-size: 32rpx;
			font-weight: bold;
		}

		.right {
			color: red;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.jiantou {
				font-size: 48rpx;
				margin-left: 10rpx;
			}
		}
	}

	// 视频素材start
	.sucai {
		margin: 30rpx;
		border-radius: 12rpx;
		padding: 20rpx;

		.header {
			font-size: 32rpx;
			font-weight: 700;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f1f1f1;
		}

		.beizhu {
			font-size: 26rpx;
			color: #666;
			margin: 30rpx 0 20rpx 0;
		}

		.shuoming {
			font-size: 26rpx;
			color: #666;
			margin: 30rpx 0 20rpx 0;
		}

		.video-upload {
			height: 150rpx;
			width: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #eee;
			border-radius: 10rpx;
		}
	}

	//文案设置
	.wenan {
		margin: 30rpx;

		.header {
			display: flex;
			height: 80rpx;
			align-items: center;

			.header-item {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
			}
		}

		.content {
			padding: 0 30rpx;
			padding-bottom: 20rpx;

			.item {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #f1f1f1;

				.left {
					font-weight: bold;
				}

				.right {
					color: #666;
				}
			}

			.ziti {
				padding-top: 30rpx;

				.yulan {
					height: 150rpx;
					line-height: 150rpx;
					width: 100%;
					text-align: center;
				}

				.slider-box {
					background: #eee;
					border-radius: 12rpx;
					margin: 0 10rpx 10rpx 10rpx;
					padding: 20rpx 0;

					.slider-footer {
						display: flex;
						justify-content: space-around;
						align-items: center;

						.xiao {
							font-size: 28rpx;

						}

						.huifu {
							width: 150rpx;
							height: 50rpx;
							line-height: 50rpx;
							font-size: 28rpx;
							border: 1rpx solid #ccc9ce;
							text-align: center;
							border-radius: 25rpx;
						}

						.da {
							font-size: 28rpx;
						}
					}

				}
			}

		}
	}

	.close {
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: #727073;
		color: #fff;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 25rpx;
		text-align: center;
	}
	
	.BtnList {
		position: fixed;
		bottom: 0rpx;
		height: 90rpx;
		width: 100vw;
		background-color: white;
		display: flex;
		justify-content: space-around;
		align-items: center;
	
		.btn {
			width: 80%;
			height: 80%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50rpx;
			font-size: 32rpx;
		}
	}
	
	.radius {
		height: 750rpx;
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		overflow: hidden;
		border: 1rpx solid #fff;
		position: relative;
	
	
		.header {
			font-size: 36rpx;
			font-weight: bold;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin: 0 30rpx;
	
		}
	
		.content {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 0rpx 20rpx 30rpx 20rpx;
	
			.item {
				width: 29%;
				height: 120rpx;
				border: 1rpx solid #eee;
				background-color: rgb(238, 234, 249);
				border-radius: 10rpx;
				display: flex;
				justify-content: center;
				font-weight: bold;
				align-items: center;
				margin-bottom: 30rpx;
				position: relative;
				font-size: 40rpx;
			}
		}
	}
</style>